<template>
    <div class="relative">
        <div class="task-bar w-full bg-white bg-opacity-80 dark:bg-gray-700 dark:bg-opacity-50 backdrop-filter backdrop-blur-lg flex justify-center z-40 fixed bottom-0"  >

            <div class="flex gap-2 p-1">
                <button class="rounded-sm hover:bg-white px-1 hover:bg-opacity-80 dark:hover:bg-black dark:hover:bg-opacity-20 duration-200 cursor-auto" :class="{'border-b-2': store.state[`${item.name}_active`], ' border-blue-600': store.state.focus === item.name}" v-for="(item, index) in items" :key="index" @click="item.action(); openApp(item.name)">
                    <img class="transform active:scale-75 duration-150" width="22" :src="`./src/assets/icons/${item.icon}.png`">
                </button>
            </div>

            <div class="flex absolute right-0 bottom-0 h-full hidden md:flex" >
                <div class="inline-flex justify-center items-center w-8 h-full">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 10px; height: 10px;">
                        <path fill="currentColor" :class="{ 'text-white': darkMode }" d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
                    </svg>
                </div>
                <div class="inline-flex justify-center items-center w-8 h-full" :class="{ ' filter invert': darkMode}">
                    <img src="../assets/ui/battery.png" class="w-4"/>
                </div>
                <div class="inline-flex justify-center items-center w-8 h-full" :class="{ ' filter invert': darkMode}">
                    <img src="../assets/ui/audio.png" class="w-4"/>
                </div>
                <div class="flex flex-col text-xs justify-center items-center px-2 hover:bg-gray-300 dark:hover:bg-gray-700 duration-150" @click="toggleCalendar" >
                    <span :class="{ ' filter invert': darkMode}">{{ today.time }}</span>
                    <span :class="{ ' filter invert': darkMode}">{{ today.date }}</span>
                </div>
                <div class="inline-flex justify-center items-center w-8 h-full hover:bg-gray-300 dark:hover:bg-gray-700 duration-150" @click="toggleNotificationCenter">
                    <img width="16" src="../assets/ui/notification-center.png" :class="{ 'filter invert': !darkMode }"/>
                </div>
                <div class="h-full w-2 border-l border-gray-300 dark:border-gray-600 ml-2"></div>
            </div>

        </div>
    </div>
    
    
</template>

<script setup>
import { watch, ref } from 'vue';
import { computed, reactive } from "@vue/reactivity";
import { onBeforeUnmount } from "@vue/runtime-core";
import { store } from "../store";
    // TODO:
    const none = () => {}
    const openApp = (name) => {
        if(name === 'start') return
        if(store.state[`${name.toLowerCase()}_active`]) {
            store.commit(`CHANGE_${name.toUpperCase()}_SHOW`, !store.state[`${name.toLowerCase()}_show`])
        } else {
            store.commit(`CHANGE_${name.toUpperCase()}_ACTIVE`, true)
        }
    }

    const darkMode = computed(() => store.state.darkMode)

    const app = ref([
            { name: 'start', icon: 'start', action: () => store.commit('CHANGE_START') },
            { name: 'search', icon: 'search-dark', action: none },
            { name: 'widget', icon: 'widget', action: none },
            { name: 'settings', icon: 'settings', action: none },
            { name: 'browser', icon: 'edge', action: none },
            { name: 'cloudmusic', icon: 'cloudmusic', action: none },
            { name: 'vscode', icon: 'vscode', action: none },
        ])

    const items = computed(() => {
        return app.value
    })

    const identify_watcher = watch(
        () => store.state.identify_active,
        (v) => {
            if(v) {
                app.value.push({ name: 'identify', icon: 'identify', action: none })
            } else {
                app.value.splice(app.value.indexOf({ name: 'identify', icon: 'identify', action: none }), 1)
            }
        }
    )
    const writeboard_watcher = watch(
        () => store.state.writeboard_active,
        (v) => {
            console.log(v)
            if(v) {
                app.value.push({ name: 'writeboard', icon: 'writeboard', action: none })
            } else {
                app.value.splice(app.value.indexOf({ name: 'writeboard', icon: 'writeboard', action: none }), 1)
            }
        }
    )
    // const cloudmusic_watcher = watch(
    //     () => store.state.cloudmusic_active,
    //     (v) => {
    //         if(v) {
    //             app.value.push({ name: 'cloudmusic', icon: 'cloudmusic', action: none })
    //         } else {
    //             app.value.splice(app.value.indexOf({ name: 'cloudmusic', icon: 'cloudmusic', action: none }), 1)
    //         }
    //     }
    // )

    const toggleCalendar = () => store.commit('CHANGE_CALENDAR')
    const toggleNotificationCenter = () => store.commit('CHANGE_NOTIFICATIONCENTER')

    const today = reactive({
        date: (new Date).toLocaleDateString(),
        time: (new Date).toTimeString().substr(0, 5),
    })

    let timer = setInterval(() => {
        today.date = (new Date).toLocaleDateString()
        today.time = (new Date).toTimeString().substr(0, 5)
    }, 1000)

    onBeforeUnmount(() => {
        clearInterval(timer)
    })

</script>

<style scoped>
.task-bar {
    height: 40px;

}
</style>